<template>
    <Transition name="custom" enter-active-class="animate__animated animate__fadeIn"
        leave-active-class="animate__animated animate__fadeOut animate__faster">
        <div class="header" v-if="showheader">
            <div class="header-adver" v-if="!mobleOrPc.ismoble">
                <el-avatar :src="avatar" v-if="showavatar" class="avatar" />
                <el-avatar src="http://imgfile.xxkdjy.top/2024011919245858472.jpg" class="avatar" v-else />
            </div>
            <div @click="showMobleheader = !showMobleheader" v-else><i class="iconfont icon-sort"></i></div>
            <div class="pc-meun" v-if="!mobleOrPc.ismoble">
                <ul>
                    <li @click="topath('/home')"> <i class="iconfont icon-home"></i>主页</li>
                    <li @click="topath('/shuoshuo')"><i class="iconfont icon-speechbubble"></i>说说</li>
                    <li @click="topath('/album')"><i class="iconfont icon-xiangce"> </i>相册</li>
                    <li @click="topath('/notes')"><i class="iconfont icon-liuyan"></i>留言</li>
                    <li @click="topath('/friends')"><i class="iconfont icon-link"></i>友联</li>
                    <li @click="topath('/resources')"><i class="iconfont icon-ziyuan"></i>藏宝阁</li>
                </ul>
            </div>
            <div class="serchandchange">
                <ul class="content">
                    <li @click="toshowsherch"><i class="iconfont icon-nav-search"></i>搜索</li>
                    <li @click="tologin">登录</li>
                    <li @click="showoption = !showoption">
                        换肤
                        <i class="iconfont icon-arrowdown" v-if="!showoption"></i>
                        <i class="iconfont icon-arrowup" v-else></i>
                        <Transition name="custom-classes" enter-active-class="animate__animated animate__fadeIn"
                            leave-active-class="animate__animated animate__fadeOutUp">
                            <ul class="pifulist" v-if="showoption">
                                <li v-for="theme in themelist" @click="changeetheme(theme.value)">{{ theme.name }}</li>
                            </ul>
                        </Transition>

                    </li>
                </ul>
            </div>
            <el-dialog v-model="showserch" :show-close="true" :width="diologwidth" @close="close">
                <template #header="{ close, titleId, titleClass }">
                    <div class="my-header">
                        <h4 :id="titleId" :class="titleClass">搜索</h4>
                    </div>
                </template>
                <div class="serch">
                    <el-input v-model="input" placeholder="搜点什么吧~~" clearable />
                    <el-button type="primary" @click="serch">搜索</el-button>
                </div>
                <div class="serch-box">
                    <div v-if="!isserch">
                        <el-tag v-for="item in serchkeyword" class="tag" closable @close="sanchu(item)"
                            @click="totag(item)"> {{ item }}</el-tag>
                    </div>
                    <template v-else>
                        <div class="serch-item" v-for="item in searchlist" @click="toArticle(item.id)">
                            <h1>{{ item.article_title }}</h1>
                            <div>
                                <i class="keyword">{{ item.keyword }}</i>
                                <span>{{ item.article_content }}</span>
                                <span>{{ item.article_description }}</span>
                            </div>
                        </div>
                    </template>
                </div>
            </el-dialog>
        </div>
    </Transition>
    <Transition name="customc" enter-active-class="animate__animated animate__fadeIn animate__faster"
        leave-active-class="animate__animated animate__fadeOut animate__faster">
        <div class="moble-meun" v-if="showMobleheader">
            <div class="moble-meun-left">
                <div class="m-menu-header">
                    <!-- 头部部分 -->
                    导航
                    <i class="iconfont icon-off-search" @click="showMobleheader = !showMobleheader"></i>
                </div>
                <div class="m-menu-body">
                    <ul>

                        <li @click="topath('/home')"><i class="iconfont icon-home"></i>主页</li>

                        <li @click="topath('/shuoshuo')"><i class="iconfont icon-speechbubble"></i>说说</li>

                        <li @click="topath('/album')"><i class="iconfont icon-xiangce"> </i>相册</li>

                        <li @click="topath('/notes')"><i class="iconfont icon-liuyan"></i>留言</li>

                        <li @click="topath('/friends')"><i class="iconfont icon-link"></i>友联</li>

                        <li @click="topath('/resources')"><i class="iconfont icon-ziyuan"></i>藏宝阁</li>

                    </ul>
                </div>
            </div>
            <div class="moble-meun-right" @click="showMobleheader = !showMobleheader"></div>
        </div>
    </Transition>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { throttle } from "@/utils/index.js"
import { MobleStore } from "@/stores/mobleOrPc.js"
import { useUser } from '@/stores/user.js'
import { useRouter } from 'vue-router';
import { serchinfo } from "@/api/article.js"
import { SiteInfoStore } from "@/stores/baseSiteInfo.js"
let router = useRouter()
let site = SiteInfoStore()
let themelist = ref(site.getThemelist)
let showserch = ref(false)
let mobleOrPc = MobleStore()
let showoption = ref(false);
let showMobleheader = ref(false);
let showheader = ref(mobleOrPc.headernotnone)
let showavatar = ref(false)
let avatar = ref("")
let diologwidth = ref("35%")
let input = ref("")
let isserch = ref(false)
let serchkeyword = ref([])
let searchlist = ref([])
/* 节流函数 */
let throttlefun = throttle()
/* 滚动监听 */
function scroll() {
    let scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    throttlefun(() => {
    
        if (scrollTop - mobleOrPc.headerScollLen > 0) {
            mobleOrPc.headernone(false)
        } else {
            mobleOrPc.headernone(true)
        }
        mobleOrPc.changeScollLen(scrollTop)
    }, 80)

}
/* 监听仓库 */
watch(() => mobleOrPc.headernotnone, (newval) => {
    showheader.value = newval
})
watch(() => mobleOrPc.ismoble, (newval) => {
    if (newval) {
        diologwidth.value = "80%"
    } else {
        diologwidth.value = "30%"
    }
})
watch(input, (newval) => {
    if (newval == "") {
        isserch.value = false
        searchlist.value = []
    }
})
watch(isserch, (newval) => {
    if (!newval) {
        serchkeyword.value = JSON.parse(localStorage.getItem("serchkeyword"))
    }
})
onMounted(() => {
    if (localStorage.getItem("currenttheme")) {
        document.documentElement.setAttribute("data-theme", localStorage.getItem("currenttheme"));
    } else {
        localStorage.setItem("currenttheme", "default");
        document.documentElement.setAttribute("data-theme", "default");
    }
    if (localStorage.getItem("isLogin")) {
        showavatar.value = true
        avatar.value = JSON.parse(localStorage.getItem("userinfo"))?.Users_corver
    }
    if(mobleOrPc.ismoble){
        diologwidth.value = "80%"
    }else{
        diologwidth.value = "30%"
    }
    
    window.addEventListener('scroll', scroll)
})
function tologin() {
    if (localStorage.getItem("isLogin")) {
        ElNotification.success({
            title: 'Success',
            message: '已经登录过了哦',
            offset: 50,
        })
    } else {
        router.push("/login")
    }

}
function topath(path) {
    showMobleheader.value = false
    router.push(path)
}
function toshowsherch() {
    showserch.value = true
    /* 点开后获取本地的搜索关键词 */
    serchkeyword.value = JSON.parse(localStorage.getItem("serchkeyword"))
}
async function serch() {
    if (input.value == "") {
        ElNotification.success({
            title: '错误',
            message: '请输入信息',
            offset: 50,
        })
    } else {
        let res = await serchinfo({ keyword: input.value })
        if (res.data.status == 200 && res.data.data.length != 0) {
            let temp = JSON.parse(localStorage.getItem("serchkeyword"))
            if (temp ?? true) {
                localStorage.setItem("serchkeyword", "[]")
                temp = []
            }
            if (!temp.find(item => item == input.value)) {
                temp.push(input.value)
            }
            localStorage.setItem("serchkeyword", JSON.stringify(temp))
            isserch.value = true
            searchlist.value = res.data.data
        } else {
            ElNotification.warning({
                title:'warning',
                message:'暂无无数据',
                offset: 50,
            })
        }

    }
}
function close() {
    isserch.value = false
    searchlist.value = []
}
function sanchu(item) {
    let temps = JSON.parse(localStorage.getItem("serchkeyword"))
    temps.splice(temps.indexOf(item), 1)
    localStorage.setItem("serchkeyword", JSON.stringify(temps))
    if (temps.length == 0) {
        isserch.value = false
        serchkeyword.value = []
    } else {
        serchkeyword.value = JSON.parse(localStorage.getItem("serchkeyword"))
    }
}
function toArticle(id) {
    isserch.value = false
    input.value = ""
    showserch.value = false
    router.push({ path: "/article", query: { id } })
}
async function totag(data) {
    isserch.value = false
    input.value = data
    await serch()
}
function changeetheme(theme) {
    site.changecurrenttheme(theme)

}
</script>

<style lang="scss" scoped>
.tag {
    padding: 0 0 0 2px;
    margin: 0 2px;
    cursor: pointer;
}

.keyword {
    color: red;
}

.serch {
    display: flex;

    @include userTheme {
        font-family: getThemeValue("fontfamily");
    }

}

.serch-box {
    margin-top: 10px;

    .serch-item {
        cursor: pointer;
        background-color: aquamarine;
        text-align: center;
        padding: 5px;

        div {
            span {
                margin-right: 10px;
            }
        }
    }
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.avatar:hover {
    animation: route 1s ease-in-out;

    @keyframes route {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}

.header {
    @include userTheme {
        font-family: getThemeValue("fontfamily");
    }

    height: 50px;
    padding: 0 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    font-size: $font-size-m;
    z-index: 99999;

    @include userTheme {
        background-color: getThemeValue("headerColor");
        color: getThemeValue("fontColor");
    }

    .pc-meun {
        ul {
            display: flex;
            justify-content: space-around;
            width: 370px;

            li {
                cursor: pointer;

                .iconfont {
                    margin: 0 2px;
                    font-size: $font-size-m;
                }
            }
        }
    }

    .serchandchange {
        .content {
            cursor: pointer;
            display: flex;
            width: 150px;
            justify-content: space-between;

            :last-child {
                position: relative;

                .pifulist {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    transform: translateY(100%);
                    width: 100%;
                    text-align: center;

                    @include userTheme {
                        background-color: getThemeValue("headerColor");
                        color: getThemeValue("fontColor");
                    }

                    li {
                        position: relative;
                        padding: 2px 0;
                        overflow: hidden;

                        &::after {
                            animation: move 0.3s linear;

                            @include keyframes(move) {
                                0% {
                                    transform: translateX(-100%);
                                }

                                100% {
                                    transform: translateX(0);
                                }
                            }

                            content: "";
                            display: block;
                            height: 4px;
                            width: 100%;
                            position: absolute;
                            bottom: 0;
                            left: 0;

                            @include userTheme {
                                background-color: getThemeValue("headerhover");
                            }

                            display: none;
                        }

                        &:hover {
                            &::after {
                                display: block;
                            }
                        }
                    }
                }
            }
        }
    }
}

.moble-meun {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100vh;
    width: 100vw;
    display: flex;

    .moble-meun-left {
        width: 60%;
        height: 100%;

        @include userTheme {
            background-color: getThemeValue("headerColor");
        }

        box-shadow: $box-shadow;

        .m-menu-header {
            font-size: $font-size-l;
            display: flex;
            justify-content: space-between;
            padding: 20px;

            @include userTheme {
                font-family: getThemeValue("fontfamily");
            }

        }

        .m-menu-body {
            padding: 20px;

            ul {
                li {
                    i {
                        margin: 0 5px;
                    }

                    cursor: pointer;

                    @include userTheme {
                        font-family: getThemeValue("fontfamily");
                        color: getThemeValue("fontColor");
                    }

                    font-size: $font-size-m;
                    padding: 15px;
                }
            }
        }
    }

    .moble-meun-right {
        width: 40%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }

}</style>